import { CustomTable } from '@/components/ProTable/interface';

export function useBtnDataGrid(dataGrid, type: 'head' | 'row', openAddBtnForm) {
  let btnDataGrid = reactive<CustomTable>({
    // 表格配置项
    columns: [
      {
        prop: 'label',
        label: '标签'
      },

      {
        prop: 'icon',
        label: '图标'
      },
      {
        prop: 'order',
        label: '排序'
      },
      { prop: 'operation', label: 'operation', width: 200, fixed: 'right' }
    ],
    data: [],
    headButtonList: [
      {
        label: 'add',
        type: 'primary',
        icon: 'el-Plus',
        methods: () => {
          openAddBtnForm('新增按钮', { btnType: type });
        }
      }
    ],
    rowButtonList: [
      {
        label: '编辑',
        type: 'primary',
        attrs: {
          link: true
        },
        methods: row => {
          const params = {
            ...row,
            btnType: type
          };
          openAddBtnForm('编辑按钮', params);
        }
      },
      {
        label: '追加子按钮',
        type: 'primary',
        display: row => !row.parentId,
        methods: row => {
          openAddBtnForm('追加子按钮', { btnType: type, parentId: row.id });
        },
        attrs: {
          link: true
        }
      },
      {
        label: '删除',
        type: 'danger',
        methods: (row, index) => {
          console.log(row, index);

          useHandleData(
            () => {
              if (type === 'head') {
                dataGrid.headButtonList.splice(index, 1);
              } else {
                dataGrid.rowButtonList.splice(index, 1);
              }
              btnDataGrid.data.splice(index, 1);
            },
            null,
            `删除 【${row.label}】`
          );
        },
        attrs: {
          link: true
        }
      }
    ]
  });

  return { btnDataGrid };
}
